<template>
    <div class="app-container">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="课程名称">
          <el-input v-model="this.$route.query.courseName" disabled placeholder="请输入课程标题"></el-input>
        </el-form-item>
      </el-form>
      <div class="attr_bar">
        <el-row class="rowline">
          <el-col :span="8" >
            <div class="grid-content bg-purple">
              <i class="el-icon-star-off"></i>
              &nbsp;&nbsp;课程背景
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              &nbsp;
            </div>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right">
              <router-link :to="{ path: 'addAttr', query: { type: 1,typeName:'课程背景',courseId:courseId}}">设置</router-link>
            </div>
          </el-col>
        </el-row>
        <el-row class="rowline">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <i class="el-icon-star-off"></i>
              &nbsp;&nbsp;课程目标
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              &nbsp;
            </div>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right">
              <router-link :to="{ path: 'addAttr', query: { type: 2,typeName:'课程目标',courseId:courseId}}">设置</router-link>
            </div>
          </el-col>
        </el-row>
        <el-row class="rowline">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <i class="el-icon-star-off"></i>
              &nbsp;&nbsp;课程设计原则
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              &nbsp;
            </div>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right">
              <router-link :to="{ path: 'addAttr', query: { type: 3,typeName:'课程设计原则',courseId:courseId}}">设置</router-link>
            </div>
          </el-col>
        </el-row>
        <el-row class="rowline">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <i class="el-icon-star-off"></i>
              &nbsp;&nbsp;课程基本属性
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              &nbsp;
            </div>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right">
              <router-link :to="{ path: 'addBasicTable', query: { typeId: 1,typeName:'课程基本属性',courseId:courseId,courseName:this.$route.query.courseName}}">设置</router-link>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>正在提交</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
          return {
            form:{
              name:''
            },
            dialogVisible: false,
            courseId: 0,
            showAddAttrPanel:false,
            submiting:false //提交状态变化
          }
        },
      mounted:function(){
          //需要判断是否创建完课程
          this.courseId = this.$route.query.courseId;
          //alert(this.$route.query.courseId);
      },
      methods:{
        onSubmit:function(){
          //显示弹出框
          //this.dialogVisible = true;
          //转圈的提交按钮
          this.submiting = true;
          //显示课程属性信息添加
          this.showAddAttrPanel = true;
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        }
      }
    }
</script>

<style scoped>
  .attr_bar{
    font-size: 16px;
    max-width: 600px;
    margin-left: 80px;
    padding-left: 5px;
  }
  .attr_bar .rowline{
    border-bottom:1px solid #CCC;
    line-height: 50px;
    height: 50px;
  }
</style>
